<template>

  <el-row :gutter="24">
    <el-col :span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="16">

      <el-form ref="form" :model="user" label-width="70%" size="mini" :inline="userInline" >

        <el-form-item label="头像" >

          <div @click="openCropperImage">
            <img v-if="txUrl" :src="txUrl" class="avatar">
<!--            截图组件-->
            <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
          </div>

        </el-form-item>

        <el-form-item label="姓名">
          <el-input v-model="user.xm"></el-input>
        </el-form-item>

        <el-form-item label="身份证号码" >
          <el-input v-model="user.sfzhm"></el-input>
        </el-form-item>

        <el-form-item label="身份证唯一标识码" >
          <el-input v-model="user.sfzid"></el-input>
        </el-form-item>

        <el-form-item label="是否重点关注">
          <el-select style="width: 100%" v-model="user.zdgz" placeholder="请选户口类型">
            <el-option label="核心" value="1"></el-option>
            <el-option label="次要" value="2"></el-option>
            <el-option label="普通" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="父亲姓名">
          <el-input v-model="user.fqxm"></el-input>
        </el-form-item>

        <el-form-item label="父亲身份证">
          <el-input v-model="user.fqsfz"></el-input>
        </el-form-item>

        <el-form-item label="母亲姓名">
          <el-input v-model="user.mqxm"></el-input>
        </el-form-item>

        <el-form-item label="母亲身份证">
          <el-input v-model="user.mqsfz"></el-input>
        </el-form-item>

        <el-form-item label="配偶姓名">
          <el-input v-model="user.poxm"></el-input>
        </el-form-item>

        <el-form-item label="配偶身份证">
          <el-input v-model="user.posfz"></el-input>
        </el-form-item>

        <el-form-item label="联系电话">
          <el-input v-model="user.lxdh"></el-input>
        </el-form-item>

        <el-form-item label="国籍">
          <el-input v-model="user.gj"></el-input>
        </el-form-item>

        <el-form-item label="实际出生日期">
          <el-input v-model="user.sjcsrq"></el-input>
        </el-form-item>

        <el-form-item label="身份证户籍地址">
          <el-input v-model="user.hjdz"></el-input>
        </el-form-item>

        <el-form-item label="人员所在地详细地址">
          <el-input v-model="user.szdxq"></el-input>
        </el-form-item>

        <el-form-item label="人员所在地国家">
          <el-input v-model="user.szdgj"></el-input>
        </el-form-item>

        <el-form-item label="人员所在地省">
          <el-input v-model="user.szdprovince"></el-input>
        </el-form-item>

        <el-form-item label="人员所在地市">
          <el-input v-model="user.szdcity"></el-input>
        </el-form-item>

        <el-form-item label="人员所在地区县">
          <el-input v-model="user.szdarea"></el-input>
        </el-form-item>

        <el-form-item label="人员所在地街道">
          <el-input v-model="user.szdjd"></el-input>
        </el-form-item>

        <el-form-item label="人员所在地居委会">
          <el-input v-model="user.szdjwh"></el-input>
        </el-form-item>

        <el-form-item label="人员状态">
          <el-select style="width: 100%" v-model="user.ryzt" placeholder="请选择人员状态">
            <el-option label="在世" value="1"></el-option>
            <el-option label="去世" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="身高">
          <el-input v-model="user.sg"></el-input>
        </el-form-item>

        <el-form-item label="体重">
          <el-input v-model="user.tz"></el-input>
        </el-form-item>

        <el-form-item label="人种">
          <el-input v-model="user.rz"></el-input>
        </el-form-item>

        <el-form-item label="民族">
          <el-input v-model="user.mz"></el-input>
        </el-form-item>

        <el-form-item label="政治面貌中文">
          <el-input v-model="user.zzmmzw"></el-input>
        </el-form-item>

        <el-form-item label="职业">
          <el-input v-model="user.zy"></el-input>
        </el-form-item>

        <el-form-item label="行业">
          <el-input v-model="user.sshymc"></el-input>
        </el-form-item>

        <el-form-item label="户口类型">
          <el-select style="width: 100%" v-model="user.hklx" placeholder="请选户口类型">
            <el-option label="城镇户口" value="1"></el-option>
            <el-option label="农村户口" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="技能">
          <el-input v-model="user.jn"></el-input>
        </el-form-item>

        <el-form-item label="宗教信仰">
          <el-input v-model="user.zjxy"></el-input>
        </el-form-item>

        <el-form-item label="综合评价">
          <el-input type="textarea" v-model="user.zhpj"></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="user.bz"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="closeButtonRefresh">取消</el-button>
        </el-form-item>


      </el-form>

    </el-col>
    <el-col :span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>

<!--    图片裁剪框-->
    <CropperImage
      ref="cropper"
      @setImagesFile="setImagesFile"
    >
    </CropperImage>

  </el-row>

</template>

<script>

  import http from '@/utils/http'
  import {checkNull, readImages} from '@/utils/utils'
  import PhotoCertificatesDetails from "./PhotoCertificatesDetails";
  import CropperImage from '../utils/CropperImage'



  export default {
    name: "UserAddUpd",
    props: {
      user: Object,
      userSaveOrUpd: String,
    },
    components: {
      CropperImage
    },
    data() {
      return {
        // 多行变一行
        userInline: false,
        // 头像图片地址
        txUrl: '',
        // 头像显示
        txVisible: false,
        // 头像点击
        disabled: false,
        // 上传的表单数据
        formData: new FormData(),
      }
    },
    methods: {
      /**
       * 获取上传的图片截图
       * @param data 图片 blob类型
       */
      setImagesFile(data){
        // 先展示
        this.txUrl = window.URL.createObjectURL(data)
        // 将图片文件加载到form表单中
        this.formData.append('file', data, '1.png')
      },
      /**
       * 打开截图裁剪框
       */
      openCropperImage(){
        this.$refs.cropper.cropperVisible = true
      },
      /**
       * 检查是否图片类型
       * @param fileType 文件类型
       * @return {boolean} true 非图片， false 是图片
       */
      checkImageType(fileType){
        if (fileType === 'image/jpeg' || fileType === 'image/jpg' || fileType === 'image/png' || fileType === 'image/gif'){
          return false;
        }
        return true;
      },
      /**
       * 提交
       */
      onSubmit(){
        if (this.userSaveOrUpd === 'save'){
          this.save()
        } else if (this.userSaveOrUpd === 'upd'){
          this.updUser();
        } else {
          this.$message({
            message: '未知的提交信息',
            type: 'warning'
          });
        }
      },
      /**
       * 关闭并刷新
       */
      closeButtonRefresh(){
        this.$emit("findIndexPage", null)
        this.$emit("userFormClose", null)
      },
      /**
       * 更新人员
       */
      updUser(){
        this.supplementData()
        http.postFileForm("/meteorological/user/updUser", this.formData).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          // 处理数据
          this.$message({
            type: 'success',
            message: '添加成功'
          });
          this.formData = new FormData();
          this.closeButtonRefresh()

        }).catch(error => {
          this.submitIsDisabled = false
          this.$message.error(error.message);
        })
      },
      /**
       * 保存
       */
      save(){
        this.supplementData()
        http.postFileForm("/meteorological/user/saveUser", this.formData).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return null
          }
          // 处理数据
          this.$message({
            type: 'success',
            message: '添加成功'
          });
          this.formData = new FormData();
          this.closeButtonRefresh()

        }).catch(error => {
          this.submitIsDisabled = false
          this.$message.error(error.message);
        })
      },
      /**
       * 补充提交的数据
       */
      supplementData(){
        this.formData.delete("id");
        this.formData.append('id', this.handleNull(this.user.id));

        this.formData.delete("zp");
        this.formData.append('zp', this.handleNull(this.user.zp));
        // 填充提交的参数
        this.formData.delete("xm")
        this.formData.append('xm', this.handleNull(this.user.xm));

        this.formData.delete("sfzhm")
        this.formData.append('sfzhm', this.handleNull(this.user.sfzhm));

        this.formData.delete("sfzid")
        this.formData.append('sfzid', this.handleNull(this.user.sfzid));

        this.formData.delete("gj")
        this.formData.append('gj', this.handleNull(this.user.gj));

        this.formData.delete("sjcsrq")
        this.formData.append('sjcsrq', this.handleNull(this.user.sjcsrq));

        this.formData.delete("hjdz")
        this.formData.append('hjdz', this.handleNull(this.user.hjdz));

        this.formData.delete("szdxq")
        this.formData.append('szdxq', this.handleNull(this.user.szdxq));

        this.formData.delete("szdgj")
        this.formData.append('szdgj', this.handleNull(this.user.szdgj));

        this.formData.delete("szdprovince")
        this.formData.append('szdprovince', this.handleNull(this.user.szdprovince));

        this.formData.delete("szdcity")
        this.formData.append('szdcity', this.handleNull(this.user.szdcity));

        this.formData.delete("szdarea")
        this.formData.append('szdarea', this.handleNull(this.user.szdarea));

        this.formData.delete("szdjd")
        this.formData.append('szdjd', this.handleNull(this.user.szdjd));

        this.formData.delete("szdjwh")
        this.formData.append('szdjwh', this.handleNull(this.user.szdjwh));

        this.formData.delete("ryzt")
        this.formData.append('ryzt', this.handleNull(this.user.ryzt));

        this.formData.delete("sg")
        this.formData.append('sg', this.handleNull(this.user.sg));

        this.formData.delete("tz")
        this.formData.append('tz', this.handleNull(this.user.tz));

        this.formData.delete("rz")
        this.formData.append('rz', this.handleNull(this.user.rz));

        this.formData.delete("mz")
        this.formData.append('mz', this.handleNull(this.user.mz));

        this.formData.delete("zzmmzw")
        this.formData.append('zzmmzw', this.handleNull(this.user.zzmmzw));

        this.formData.delete("zy")
        this.formData.append('zy', this.handleNull(this.user.zy));

        this.formData.delete("sshymc")
        this.formData.append('sshymc', this.handleNull(this.user.sshymc));

        this.formData.delete("hklx")
        this.formData.append('hklx', this.handleNull(this.user.hklx));

        this.formData.delete("jn")
        this.formData.append('jn', this.handleNull(this.user.jn));

        this.formData.delete("zjxy")
        this.formData.append('zjxy', this.handleNull(this.user.zjxy));

        this.formData.delete("zhpj")
        this.formData.append('zhpj', this.handleNull(this.user.zhpj));

        this.formData.delete("bz")
        this.formData.append('bz', this.handleNull(this.user.bz));

        this.formData.delete("zdgz")
        this.formData.append('zdgz', this.handleNull(this.user.zdgz));

        this.formData.delete("fqxm")
        this.formData.append('fqxm', this.handleNull(this.user.fqxm));

        this.formData.delete("fqsfz")
        this.formData.append('fqsfz', this.handleNull(this.user.fqsfz));

        this.formData.delete("mqxm")
        this.formData.append('mqxm', this.handleNull(this.user.mqxm));

        this.formData.delete("mqsfz")
        this.formData.append('mqsfz', this.handleNull(this.user.mqsfz));

        this.formData.delete("poxm")
        this.formData.append('poxm', this.handleNull(this.user.poxm));

        this.formData.delete("posfz")
        this.formData.append('posfz', this.handleNull(this.user.posfz));

        this.formData.delete("lxdh")
        this.formData.append('lxdh', this.handleNull(this.user.lxdh));

        console.log(this.user.sfzhm)
        console.log(this.formData.get("sfzhm"))
      },
      /**
       * 处理空值的问题
       * @param value 要处理的值
       */
      handleNull(value){
        if (checkNull(value)){
          return ''
        }
        return value;
      },
    },
    created: function(){

    },
    watch: {
      /**
       * 监听打开事件,从而渲染地区的下拉框
       * @param show 当前的值
       */
      user: {
        immediate: true,
        handler(show) {
          console.log(this.userSaveOrUpd)
          if (this.userSaveOrUpd === 'upd'){
            if (this.user.zp != null){
              // 如果有照片，则读取照片
              console.log(111)
              this.txUrl = readImages(this.user.zp)
            }
          } else {
              console.log(22)
            this.txUrl = null;
          }

          if (this.user.zdgz == null){
            this.user.zdgz = '3'
          }
        }
      },
    },
  }
</script>

<style scoped>

  /*上传组件的样式*/
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
    /*边框虚线*/
    border: 1px dashed #8c939d
  }
  /*上传组件的样式*/
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }


</style>
